<template>
  <div class="main">
    <div class="user">
     <h2 style="text-align: center;padding-bottom: 15%;">用户信息</h2>
  <el-descriptions class="margin-top" column="3" :size="size" border>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-user"></i>
        用户名
      </template>
     {{data.username}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        手机号
      </template>
    {{data.phone}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        居住地
      </template>
      中山市
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-tickets"></i>
        备注
      </template>
      <el-tag size="small">地址</el-tag>
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
        联系地址
      </template>
      {{address[0].provinceName}}{{address[0].cityName}}{{address[0].districtName}}
    </el-descriptions-item>
  </el-descriptions>
  <div style="margin-left: 35%;margin-top: 10%;"> <el-button type="primary" @click="chozhi()">密码修改</el-button></div>

    </div>
    <div class="Info" v-if="Switch3">
      <div style="width: 300px;height: 300px;margin-top: 20%;">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm" label-width="100px">
        <el-form-item label="旧密码" prop="oldPassword">
<el-input type="password" v-model="ruleForm.oldPassword" autocomplete="off" show-password></el-input>
  </el-form-item>
  <el-form-item label="新密码" prop="password" >
<el-input type="password" v-model="ruleForm.password" autocomplete="off" show-password></el-input>
  </el-form-item>
  <el-form-item label="确认密码" prop="passwordRepeat">
    <el-input type="password" v-model="ruleForm.passwordRepeat" autocomplete="off" show-password></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm(ruleForm)">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
      </div>

    </div>
  </div>
</template>
<script>
import { METHOD, request } from '@/utils/request'
import { Message } from 'element-ui'
export default {
  name: 'userInfoView',
  data () {
    return {
      data: null,
      address: null,
      fits: ['fill'],
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      Switch3: false,
      ruleForm: {
        oldPassword: '',
        password: '',
        passwordRepeat: ''
      },
      validatePass: (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入旧密码'))
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('oldPassword')
          }
          callback()
        }
      },
      validatePass2: (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.ruleForm.password) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      },
      validatePass3: (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入新密码'))
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('password')
          }
          callback()
        }
      },
      rules: {
        oldPassword: [
          { required: true, message: '旧密码不能为空' }
        ],
        password: [
          { required: true, message: '新密码不能为空' }
        ],
        passwordRepeat: [
          { required: true, message: '确认密码不能为空' }
        ]
      }
    }
  },
  created () {
    this.query()
    this.addressQuery()
  },
  methods: {
    query () {
      const params = ''
      request('/api/user/self/info', METHOD.GET, params).then((resp) => {
        this.data = resp.data.data
      })
      // console.log(sessionStorage.getItem('Authority'))
    },
    addressQuery () {
      const params = ''
      request('/api/user/self/address/list', METHOD.GET, params).then((resp) => {
        console.log(resp.data)
        this.address = resp.data.data
      })
    },
    chozhi () {
      this.Switch3 = true
      console.log(this.Switch3)
    },
    submitForm (x) {
      console.log(x.pass)
      const params = {
        oldPassword: this.ruleForm.oldPassword,
        password: this.ruleForm.password,
        passwordRepeat: this.ruleForm.passwordRepeat
      }
      request('/api/user/self/resetPassword', METHOD.PUT, params).then((resp) => {
        if (resp.data.code === 1) {
          Message({
            message: '重置密码成功!',
            type: 'success',
            duration: 5 * 1000
          })
          this.Switch3 = false
        } else {
          Message({
            message: resp.data.msg,
            type: 'danger',
            duration: 5 * 1000
          })
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style scoped>
.main {
  width: 100%;
  display: flex;
}

.user {
  width: 400px;
  height: 400px;
  background-color: white;
  box-shadow: 3px 6px 10px 5px gray;
  margin-top: 5%;
  margin-left: 10%;
  border-radius: 20px;
}

.Info {
  position: relative;
  width: 400px;
  height: 400px;
  margin-left: 5%;
  margin-top: 5%;
  background-color: rgb(251, 243, 243);
  border-radius: 20px;
}
</style>
